<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        <style>
            .v-enter,.v-leave-to{
                opacity: 0;
            }
            .v-enter-active,.v-leave-active{
                transition: 2s all linear;
            }
            .v-enter-to,.v-leave{
                opacity: 1;
            }

            .show-leave-active {
                animation: show 2s linear;
            }
            .show-enter-active {
                animation: show 2s linear reverse;
            }

            @keyframes show {
                0% {
                opacity: 1;
                transform: translateX(0);
                }
                50% {
                opacity: 1;
                transform: translateX(100px);
                }
                100% {
                opacity: 0;
                transform: translateX(200px);
                }
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 
                Vue提供内置元素transition，给内部子元素添加过渡&动画效果（实际上给元素添加了类名）

                enter 从隐藏到显示
                    v-enter (刚开始)
                    v-enter-active (中间)
                    v-enter-to (结束)

                leave 从显示到隐藏
                    v-leave (刚开始) 
                    v-leave-active (中间)
                    v-leave-to (结束)
            -->
            <transition-group>
                <p v-show="isShow" key="1">《鸣潮》游戏拉胯关我流水什么事？被曝首周近5亿</p>
                <p v-show="isShow" key="2">《鸣潮》游戏拉胯关我流水什么事？被曝首周近5亿</p>
            </transition-group>
            <transition name="show">
                <p v-show="isShow">《鸣潮》游戏拉胯关我流水什么事？被曝首周近5亿</p>
            </transition>
            <button @click="isShow = !isShow">btn</button>
         </div>
         <script src="../js/vue.js"></script>
         <script>
             const vm = new Vue({
                 data:{
                     isShow:true,
                 },
                 
             });
             vm.$mount("#app");
         </script>
    </body>
</html>